<script setup>
    import { ref } from 'vue';
	// 获取窗口信息, 获取导航栏高度 windowInfo.statusBarHeight
	const windowInfo = uni.getWindowInfo()
	// #ifdef MP-WEIXIN || MP-ALIPAY
	// 获取小程序胶囊按钮信息，H5 没有胶囊按钮，所以需要条件编译
	const menuRect = uni.getMenuButtonBoundingClientRect()
	// console.log(menuRect)
	// #endif

	// #ifndef MP
	// 注意：非小程序端没有胶囊按钮信息，通过条件编译，设置宽度为 0 即可，否则浏览器报错
	const menuRect = {
		width: 0
	}
	// #endif

	// 1. 定义数据，工作的项目，这些数据都是后端返回的
	const entryList = ref([
		{
			icon: 'https://p0.ssl.qhimg.com/t01f222be1309c2fd7f.png',
			text: '全局产品'
		},
		{
			icon: 'https://p4.ssl.qhimg.com/t01d7427e1f6239b1b1.png',
			text: '360搜索'
		},
		{
			icon: 'https://p2.ssl.qhimg.com/t0199146ed535ecd65e.png',
			text: '360商城'
		},
		{
			icon: 'https://p1.ssl.qhimg.com/t0192c6a682125e6cc9.png',
			text: '360游戏'
		},
	])
	//2、定义手机软件循环渲染数据
	const softwareList = ref([
		{
			imgaddress:'https://p3.ssl.qhimg.com/t0128439c6143122bad.png',
			name:'手机卫士',
			size:'8.95',
			download:'手机卫士下载链接'
		},
		{
			imgaddress:'https://p2.ssl.qhimg.com/t01fa9c1531e3294ca3.png',
			name:'手机助手',
			size:'27.75',
			download:'手机助手下载链接'
		},
		{
			imgaddress:'https://p1.ssl.qhimg.com/t01d5f0eeb2cc0b0ecd.png',
			name:'浏览器',
			size:'79.20',
			download:'浏览器下载链接'
		},
		{
			imgaddress:'https://p3.ssl.qhimg.com/t015eebd58e3c9362f7.png',
			name:'清理大师',
			size:'5.8',
			download:'清理大师下载链接'
		},
		{
			imgaddress:'https://p3.ssl.qhimg.com/t01a555ce62565c3aa9.png',
			name:'极速浏览器',
			size:'54.00',
			download:'极速浏览器下载链接'
		},
		{
			imgaddress:'https://p1.ssl.qhmsg.com/t01ac094f0e7138f4c1.png',
			name:'省电王',
			size:'2.8',
			download:'省电王下载链接'
		},
		{
			imgaddress:'https://p4.ssl.qhmsg.com/t01e4c126e44c6e0e47.png',
			name:'免费WIFI',
			size:'3.8',
			download:'免费WIFI下载链接'
		},
		{
			imgaddress:'https://p2.ssl.qhimg.com/t01cbde8755c0c23978.jpg',
			name:'安全课',
			size:'9',
			download:'安全课下载链接'
		},
	])
</script>

<template>
	<!-- 写结构 -->
	<!-- 1. 自定义导航栏 -->
	<view class="header" :style="{
		paddingTop: windowInfo.statusBarHeight + 'px', 
		paddingRight: menuRect.width + 10 + 'px',
		height: menuRect.height + 10 + 'px'
	}">
		<!-- 左侧LOGO -->
		<image class="header-logo" src="https://p2.ssl.qhimg.com/t01893213e448dbbfa2.png" mode="heightFix"></image>
		<!-- 右侧菜单 -->
		<image class="header-menu" src="https://p1.ssl.qhmsg.com/t010fa93a99715aad32.png" mode=""></image>
	</view>
	<!-- 2. 轮播图 -->
	<swiper class="swiper-banner" 
		autoplay 
		circular 
		indicator-dots 
		interval="2000" 
		indicator-color="rgba(255,255,255, 0.3)"
		indicator-active-color="#fff"
	>
		<swiper-item>
			<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode=""></image>
		</swiper-item>
	</swiper>
	<!-- 3. 产品入口 -->
	<!-- 布局公式
	  1. 排版
	  2. 内容
	  3. 美化
	  
	  数据驱动视图
	  1. 定义数据
	  2. 绑定数据
	  3. 修改数据
	 -->
	<view class="entry">
		<!-- v-for 循环生成列表项, item 表示循环项 -->
		<view v-for="item in entryList" class="entry-item">
			<!-- :src="绑定图片地址" -->
			<image class="entry-image" :src="item.icon" mode="heightFix"></image>
			<text class="entry-text">{{ item.text }}</text>
		</view>
	</view>
	<!-- 分割模块 -->
	<view class="divider"></view>
	<!-- 
	 布局公式
	   1. 排版
	   2. 内容
	   3. 美化
	 -->
	<!-- 4. 手机软件 -->
	<view class="software">
		<text class="software-title">手机软件</text>
		<!-- row 横排  wrap 换行 -->
		<view class="software-list row wrap">
			<!-- column 竖排 -->
			<view v-for="item in softwareList" class="software-item column">
				<image class="software-image" :src="item.imgaddress" mode=""></image>
				<text class="software-name">{{item.name}}</text>
				<text class="software-size">{{item.size}}M</text>
				<text class="software-download">下载</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	@import "../../uni.scss";
	/* 写样式 */
	/* 自定义导航栏 */
	.header {
		/* width: 375px; */

		/* rpx 响应式像素，是小程序用于实现屏幕适配新增的单位 */
		/* 屏幕宽度统一为 750rpx，相当于把屏幕分成了 750 份 */

		/* width: 750rpx; */
		/* #ifdef MP */
		height: 80rpx;
		/* #endif */

		/* #ifdef H5 */
		height: 96rpx;
		/* #endif */

		background-color: #23ac38;

		padding-top: 60rpx;
		padding-left: 20rpx;

		/* flex 模式 */
		display: flex;
		/* 主轴对齐 */
		justify-content: space-between;
		/* 交叉轴对齐 */
		align-items: center;
		
		/* 自定义导航栏 - logo */
		.header-logo {
			width: 166rpx;
			height: 64rpx;
		}
		
		.header-menu {
			width: 44rpx;
			height: 32rpx;
		}
	}
	
	/* 2. 轮播图模块 */
	.swiper-banner,
	.swiper-image {
		width: 100%;
		height: 416rpx;
	}
	
	/* 3. 产品入口 */
	/* scss => super css => css 预处理器 */
	.entry {
		display: flex;
		height: 120rpx;
		padding-top: 60rpx;
		padding-bottom: 20rpx;
		
		.entry-item{
			width: 25%;
			/* 修改 flex 主轴方向为垂直 */
			display: flex;
			flex-direction: column;
			border-right: 1rpx solid #ddd;
			align-items: center;
		}
		
		.entry-image{
			width: 92rpx;
			height: 82rpx;
			margin-bottom: 10rpx;
		}
		
		.entry-text{
			font-size: 24rpx;
		}
	}
	
	// 手机软件
	.software{
		padding: 50rpx 30rpx;
		// 标题
		.software-title {
			font-size: 48rpx;
			color: #333;
		}
		
		.software-list{
		}
		
		// 列表
		.software-item {
			margin-top: 20rpx;
			width: 25%;
			display: flex;
			// 设置 flex 主轴方向
			flex-direction: column;
			// 侧轴方向居中
			align-items: center;
		}
		
		.software-name {
			margin-top: 10rpx;
			font-size: 30rpx;
			color: #333;
		}
		
		.software-size{
			font-size: 30rpx;
			color: #cdcdcd;
		}
		
		.software-download{
			margin-top: 10rpx;
			color: #23ac38;;
			background-color: #E2F2E2;
			font-size: 30rpx;
			width: 100rpx;
			height: 50rpx;
			border-radius: 25rpx;
			text-align: center;
			line-height: 50rpx;
		}
		
		// 图片样式
		.software-image{
			width: 96rpx;
			height: 96rpx;
		}
	}
	
</style>